<template>
  <div class="box">
    <!-- <p>{{msg}}</p> -->
    <van-cell-group>
      <van-field v-model="username" label="用户名" right-icon="question-o" placeholder="请输入手机号"
        @click-right-icon="$toast('question')" />

      <van-field v-model="password" type="password" label="密码" placeholder="请输入大于6位密码" />
      <van-field v-model="password2" type="password" label="确认密码" placeholder="确认密码" />
      <!-- <van-field
  v-model="phone"
  type="text"
  label="手机号"
  placeholder="请输入手机号"

/> -->

      <!-- <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <van-button :disabled="btn==false" @click="SMS" slot="button" size="small" type="primary">{{verify}}
        </van-button>
      </van-field> -->
    </van-cell-group>



    <div class="login">
      <p>
        <van-button :disabled="btnState==false" @click="nextStep" color="#ff9900" type="primary">下一步</van-button>
      </p>
    </div>
    <p> <input type="checkbox" name="" id="" v-model="radio"> 我已阅读并同意使用条款he隐私政策</p>

  </div>
</template>
<script>
  import { Toast } from 'vant';
  import getData from '@/assets/js/axios.js'
  export default {
    data() {
      return {
        username: '',
        password: '',
        password2: '',
        sms: '',
        msg: '',
        radio: false,
        btnState: false,
        // phone:'',
        verify: '点击获取验证',
        btn: true,
        m: 60,
        userflag: false,
        // 定时器
        intervalBtn: {},
      }
    },
    watch: {
      username(newvalue) {
        //   console.log(newvalue.length,'长度')
        let myreg = /^1[3,4,5,6,7,8,9][0-9]{9}$/
        //    console.log(newvalue)
        if (newvalue == '') {
          this.msg = '账号或密码不能为空';
          return false
        } else if (newvalue.length < 11 || newvalue.length > 11) {

          this.msg = '请输入11位手机号';
          this.userflag = false;
        };
        if (newvalue.length == 11) {
          this.msg = '';
          this.userflag = true;
        }

      },
      password(newvalue) {
        if (newvalue == '') {
          this.msg = '密码不能为空';
          this.btnState = false;
          return false;
        }
        if (newvalue.length >= 6) {

          //.msg=this.username;
          // console.log(newvalue, this.userflag)
          if (this.userflag) {
            this.msg = '';
            //Toast('点击图标');
            this.btnState = true;
          }
        } else {
          // this.userflag = false;
        }


      },
      password2(newvalue) {
        // if (newvalue == '') {
        //   this.msg = '密码不能为空';
        //   this.btnState = false;
        //   return false;
        // }
        if (newvalue.length >= 6) {
          //.msg=this.username;
          // console.log(newvalue, this.userflag)
          if (this.userflag) {
            //this.msg = '验证成功';
            //Toast('点击图标');
            // this.btnState = true;
          }
        } else {
          // this.userflag = false;
        }
      },


      radio(newvalue) {
        //console.log(newvalue,333333333)
      }



    },
    methods: {

      SMS() {
        if (this.userflag) {
          console.log(this.username, "zhege");
          let data = {
            "mobile": this.username,
            "type":1

          }
          getData.send(data).then(res => {
            console.log(res, 'fasong')
            Toast(res.data.msg);

          }).catch(err => {

          })
          this.btn = false;
          let timenumber = 60;
          var _this = this;
          this.verify = this.m + '秒后再次发送'
          this.intervalBtn = setInterval(function () {
            timenumber--;
            if (timenumber <= 0) {
              // 清除定时器
              console.log(timenumber, 1111123);
              clearInterval(_this.intervalBtn);
              // 更改btn状态
              _this.btn = true;
              // 重置倒计时状态
              _this.verify = "点击获取验证"
            } else {
              _this.verify = timenumber + '秒后再次发送'
            }
            console.log(timenumber, 123)

          }, 1000)

        } else {
          //this.msg = '请输入手机号';
          Toast('请输入手机号');
        }
      },

      //点击下一步
      nextStep() {
        if (!this.userflag) {
          return Toast("请确认手机号密码");
        };
        if (this.password2 != this.password) {
          return Toast("密码请保持一致");
        };
        // if (this.sms == "") {
        //   return Toast("请输入短信验证");
        // };
        if (this.radio != true) {
          return Toast("请阅读勾选条款");
        };
        let para = {
          "mobile": this.username,
          "code":88888,
          "password":this.password,
          "repassword":this.password2,
          "nickname":"zxmtest"
        };
        getData.reg(para).then(res => {
          console.log(res, 'fasong')
          Toast(res.data.msg);
            if(res.data.code==2000){
              this.$router.push('/home')
            }
        }).catch(err => {

        });
    
      

      }

    },


  }
</script>
<style lang="" scoped>
  .box {
    background-color: #ffffff;
    padding-top: 2.4rem;
  }

  .login {
    height: 2rem;
    display: flex;
    /* justify-content:center; */
    align-items: center;
  }

  .login p {
    margin: 0 auto;
  }

  .login p button {
    width: 6rem;
    height: 1rem;

  }

  .login p button span {
    font-size: 0.4rem
  }
</style>